import React, {Component} from 'react'
import {connect} from 'react-redux'
import { Form, Icon, Input, Button, Table } from 'antd'
import moment from 'moment'
import './memo.scss'
import {action} from './store'


const FormItem = Form.Item

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class Memo extends Component {
  constructor (props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '事件名',
          dataIndex: 'name',
          key: 'name',
        }, 
        {
          title: '预约时间',
          dataIndex: 'time',
          key: 'time',
        }, 
        {
          title: '事件备注',
          dataIndex: 'remark',
          key: 'remark',
        }, 
        {
          title: '操作',
          key: 'handle',
          render: row => (
            <span>
              {!row.type && <span onClick={() => this.handle('done',row)} className='handles'>完成</span>}
              <span onClick={() => this.handle('del',row)} className='handles'>删除</span>
            </span>
          ),
        }
      ],
      todoList: [
        {
          key: 0,
          name: '吃饭',
          time: '18:30',
          remark: '吃晚饭',
          type: 0
        }
      ]
    }
  }
  handle (mark, row) {
    this.props.dispatch(action.fetchMemo({memo: 100}))
    // let {todoList} = this.state
    // if (mark === 'done') {
    //   this.setState({
    //     todoList: todoList.map(todo => {
    //       if (todo.key === row.key) todo.type = 1
    //       return todo
    //     })
    //   })
    // } else if (mark === 'del') {
    //   this.setState({
    //     todoList: todoList.filter(todo => todo.key !== row.key)
    //   })
    // }
  }
  handleSubmit (e) {
    this.props.dispatch(action.changeTest({test: 111}))
    e.preventDefault();
    // this.props.form.validateFields((err, values) => {
    //   if (!err) {
    //     console.log(values)
    //    this.setState({
    //     todoList: [...this.state.todoList, {...values,key: this.state.todoList.length + 1, time: moment().format('HH:mm')}]
    //    })
    //   }
    // });
  }
  render () {
    console.log('props-->', this.props);
    const { getFieldDecorator, getFieldsError } = this.props.form
    return (
      <div className='memo'>
        <p>list</p>
        <Form layout="inline" onSubmit={e => this.handleSubmit(e)}>
          <FormItem>
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请输入事件名！' }],
            })(
              <Input prefix={<Icon type="book" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="事件名" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('remark', {
              rules: [{ required: true, message: '这里不要填的吗？' }],
            })(
              <Input prefix={<Icon type="book" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="备注" />
            )}
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              htmlType="submit"
              disabled={hasErrors(getFieldsError())}
            >
              Log in
            </Button>
          </FormItem>
        </Form>
        <Table columns={this.state.columns} dataSource={this.state.todoList} />
      </div>
    )
  }
}


export default connect(state => ({
  memo: state.user.memo.memo,
  test: state.user.memo.test
}) )(Form.create()(Memo)) 